{extend name="../../../view/public/base" /}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <blockquote class="layui-elem-quote layui-text" style="border-left: 5px solid #01AAED;">
                    1、自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。<br>
                    2、一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。
                </blockquote>
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <!--用户应用id-->
                    <input type="hidden" name="member_miniapp_id" class="layui-input" value="{$row.member_miniapp_id}" lay-verify='required'>
                    <!--上级菜单id-->
                    <!--状态:1=上架,0=下架-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">上级菜单</label>
                            <div class="layui-input-block" id="parent_id">
                                <select name="parent_id" lay-verify="required" lay-filter="parent_id">
                                    <option value="0" {$row.parent_id == 0 ? 'selected' : ''}>顶级菜单</option>
                                    {foreach $parents as $vo}
                                    <option value="{$vo.id}" {$row.parent_id == $vo.id ? 'selected' : ''}>{$vo.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--状态:1=上架,0=下架-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">链接类型</label>
                            <div class="layui-input-block" id="types">
                                <select name="types" lay-verify="required" lay-filter="types">
                                    <option value="view" {$row.types == 'view' ? 'selected' : ''}>打开网页</option>
                                    <option value="miniprogram" {$row.types == 'miniprogram' ? 'selected' : ''}>打开小程序</option>
                                    <option value="click" {$row.types == 'click' ? 'selected' : ''}>触发关键词</option>
                                    <option value="scancode_push" {$row.types == 'scancode_push' ? 'selected' : ''}>扫码</option>
                                    <option value="scancode_waitmsg" {$row.types == 'scancode_waitmsg' ? 'selected' : ''}>扫码(等待信息)</option>
                                    <option value="location_select" {$row.types == 'location_select' ? 'selected' : ''}>发送位置</option>
                                    <option value="pic_sysphoto" {$row.types == 'pic_sysphoto' ? 'selected' : ''}>系统拍照发图</option>
                                    <option value="pic_photo_or_album" {$row.types == 'pic_photo_or_album' ? 'selected' : ''}>拍照或者相册发图</option>
                                    <option value="pic_weixin" {$row.types == 'pic_weixin' ? 'selected' : ''}>微信相册发图</option>
                                    <option value="view" {$row.types == 'media_id' ? 'selected' : ''}>回复素材</option>
                                    <option value="miniprogram" {$row.types == 'view_limited' ? 'selected' : ''}>跳转图文</option>

                                </select>
                            </div>
                        </div>
                    </div>
                    <!--菜单名称-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入菜单名称" class="layui-input" value="{$row.name}" lay-verify='required'>
                        </div>
                    </div>
                    <!--链接地址-->
                    <div class="layui-form-item" id="url" style="{:in_array($row.types,['miniprogram','view']) ? 'display: block' : 'display: none'}">
                        <label class="layui-form-label">链接地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="url" placeholder="请输入链接地址" class="layui-input" value="{$row.url}">
                        </div>
                        <div class="layui-form-mid layui-word-aux">示例:http://www.buwangkeji.com/</div>
                    </div>
                    <!--小程序链接-->
                    <div class="layui-form-item" id="pagepath" style="{:in_array($row.types,['miniprogram']) ? 'display: block' : 'display: none'}">
                        <label class="layui-form-label">小程序页面</label>
                        <div class="layui-input-inline">
                            <input type="text" name="pagepath" placeholder="请输入小程序链接" class="layui-input" value="{$row.pagepath}">
                        </div>
                        <div class="layui-form-mid layui-word-aux">示例:pages/index/index</div>
                    </div>
                    <div class="layui-form-item" id="appid" style="{:in_array($row.types,['miniprogram']) ? 'display: block' : 'display: none'}">
                        <label class="layui-form-label">小程序ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="appid" placeholder="请输入小程序ID" class="layui-input" value="{$row.appid}">
                        </div>
                    </div>
                    <!--触发关键字-->
                    <div class="layui-form-item" id="key" style="{:in_array($row.types,['click', 'scancode_push', 'scancode_waitmsg', 'pic_sysphoto', 'pic_photo_or_album', 'pic_weixin', 'location_select']) ? 'display: block' : 'display: none'}">
<!--                        <label class="layui-form-label">触发关键字</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="text" name="key" placeholder="请输入触发关键字" class="layui-input" value="{$row.key}">-->
<!--                        </div>-->
                        <div class="layui-inline">
                            <label class="layui-form-label">匹配规则</label>
                            <div class="layui-input-block">
                                <select name="key">
                                    {foreach $keys as $key=>$vo }
                                    <option value="{$vo.keys}" {$row.key == $vo.keys ? 'selected' : ''}>{$vo.keys}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--排序-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sort" placeholder="请输入排序" class="layui-input" value="{$row.sort}">
                        </div>
                        <div class="layui-form-mid layui-word-aux">数字越大,排序越靠后</div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var form, upload;

    layui.use(['form', 'upload'], function () {
        form = layui.form;

        form.on('select(types)', function (data) {
            if (data.value === 'view') {
                $("#url").attr("style", "display: block");
                $("#pagepath").attr("style", "display: none");
                $("#key").attr("style", "display: none");
            }
            if (data.value === 'miniprogram') {
                $("#url").attr("style", "display: block");
                $("#pagepath").attr("style", "display: block");
                $("#appid").attr("style", "display: block");
                $("#key").attr("style", "display: none");
            }
            if (data.value === 'click') {
                $("#url").attr("style", "display: none");
                $("#pagepath").attr("style", "display: none");
                $("#appid").attr("style", "display: none");
                $("#key").attr("style", "display: block");
            }
            var types = ["scancode_push", "scancode_waitmsg", "pic_sysphoto", "pic_photo_or_album", "pic_weixin", "location_select"];
            if (types.indexOf(data.value) >= 0) {
                $("#url").attr("style", "display: none");
                $("#pagepath").attr("style", "display: none");
                $("#appid").attr("style", "display: none");
                $("#key").attr("style", "display: block");
            }
        });

        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

            if(data.value === 'view'){
                data.pagepath = '';
                data.key = '';
            }
            if(data.value === 'click'){
                data.url = '';
                data.pagepath = '';
            }

            //ajax调用后台接口
            bwajax.post("{:Url('edit')}?miniapp_id={$member_miniapp_id}&id={$row.id}", data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                })

            return false;
        })
    });
</script>
{/block}